<template>
  <view :class="s.item">
    <view :class="s.Box" @tap="goBlogDetail">
      <view :class="s.left">
        <view :class="s.title">{{ title }}</view>
        <view :class="s.content" >
          <view v-html="content"></view>
        </view>
      </view>
      <view :class="s.right">
        <image mode="scaleToFill" :src="imgSrc" :class="s.img"></image>
      </view>
    </view>
    <view :class="s.good">
        <view>
          <text @tap="addGoodNum" :class='[s.iconfont ,s.icondianzan]' :style="{color:changeGoodColor?'#ea7a99':''}">{{num}}</text>
        </view>
        <text :class="[s.iconfont ,s.iconyanjing]" >{{guankanNum}}</text>
    </view>
  </view>
</template>

<script lang="ts">
import { defineComponent, reactive, ref, toRefs } from "vue";
import { AtIcon } from 'taro-ui-vue3'
import Taro from "@tarojs/taro"
export default defineComponent({
  components:{
    AtIcon
  },
  props: {
    dianzanNum: {
      type:String,
      default: "0"
    },
    pinglunNum: {
      type: String,
      default: "0"
    },
    guankanNum: {
      type: String,
      default: "0"
    },
    title: {
      type: String,
      default: "",
    },
    content: {
      type: String,
      default: "sdasd看见这些保存状况进行操作空间操作可进行才能走心空间才能走",
    },
    imgSrc: {
      type: String,
      default: "",
    },
    id:{
      type:Number,
      default: 0
    },
  },
  setup(props) {
    let goodBehiver = reactive({
      num:props.dianzanNum,
      canGood:true
    })
    let changeGoodColor = ref<boolean>(false)
    function goBlogDetail(){
      console.log("xxx")
      Taro.navigateTo({
        url:`/pages/blog/detail?id=${props.id}`
      })
    }
    async function addGoodNum():Promise<void>{
      if(changeGoodColor.value)return 
      changeGoodColor.value = true
      let data = await Taro.request({
        url:"https://www.ttzxh.icu:443/api/blog/goodNum",
        method:"POST",
        data:{
          id:props.id,
          goodNum:props.dianzanNum+1
        }
      })
      console.log(data)
      if(data.data.error===-1){
        //点赞数量+1
        goodBehiver.num+=1
      }
    }
    return {
      changeGoodColor,
      addGoodNum,
      goBlogDetail,
      ...toRefs(goodBehiver)
    }
  },
});
</script>

<style lang="scss" module="s">
@import url("../../icon.css");
$slow-font-color: #80848f;
$slow-backgroundColor-color:#e5e5e5;
.item {
  box-sizing: border-box;
  margin: 10Px 0;
  .Box {
    display: flex;
    padding: 8Px 8Px 2Px 8Px;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    .left {
      flex-basis: 474px;
      
      .title{
          display: inline-block;
          margin-bottom: 3Px;
          text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      }
      .content{
        width: 500px;
        height: 127px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      font-size: 28px;
      color: #80848f;
      font-weight: 200;
      }
    }
    .right {
      .img {
        width: 200px;
        height: 150px;
      }
    }
  }
  .good {
    padding: 0 48Px 0 8Px;
    height: 50px;
    background-color: #fff;
    color: #333;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    font-weight: 300;
    .iconfont {
      letter-spacing: 8px;
      font-size: 15Px;
      &:nth-child(2){
        margin-left: 32Px;
      }
    }
  }
}

</style>
